<template>
  <div class="container">
    <div class="head_bar">
      <div class="query_region flex">
        <el-input
          placeholder="请输入内容"
          v-model="query.likeWords"
          class="input-with-select"
          size="small"
        >
          <el-select
            filterable
            v-model="query.queryDataBaseFiled"
            slot="prepend"
            placeholder="请选择"
            size="small"
          >
            <el-option
              :label="item.label"
              :value="item.value"
              v-for="(item, index) in screenList"
              :key="index"
            ></el-option>
          </el-select>
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          ></el-button>
        </el-input>
        <div style="width: 50px; margin-left: 8px; margin-right: 4px">
          筛选:
        </div>
        <el-select
          filterable
          v-model="query.saleOrderGroupState"
          slot="prepend"
          placeholder="请选择"
          size="small"
          @change="handleSelectChange"
        >
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in stateList"
            :key="index"
          ></el-option>
        </el-select>
      </div>
      <div class="create">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="handleCreateOrder"
          >新建订单</el-button
        >
      </div>
    </div>
    <div class="table_head">
      <div class="product_info"><span>产品信息</span></div>
      <div style="width: 300px"><span>订单信息</span></div>
      <div><span>型号明细</span></div>
      <div><span>下单单价</span></div>
      <div><span>下单总数</span></div>
      <div><span>小计</span></div>
    </div>
    <div style="flex: 1; overflow-y: auto">
      <div class="table_tr" v-for="(item, index) in orderList" :key="index">
        <div class="table_th">
          <div class="table_th_info">
            <i
              class="el-icon-arrow-down pr16"
              v-if="item.isShow"
              @click="item.isShow = false"
            ></i>
            <i
              class="el-icon-arrow-up pr16"
              v-else
              @click="item.isShow = true"
            ></i>
            <span class="key"
              >订单单号:<span class="val">{{
                item.saleOrderGroupNumber
              }}</span></span
            >
            <span class="key"
              >订单状态:<el-tag
                size="small"
                :type="getOrderState(item.saleOrderGroupState).state"
                >{{ getOrderState(item.saleOrderGroupState).name }}</el-tag
              ></span
            >
            <span class="key"
              >订单总额:<span
                class="val"
                v-if="item.orderTotalAmount !== null"
                >{{ item.orderTotalAmount }}</span
              >
              <span class="val" v-else>暂无权限查看</span>
            </span>
          </div>
          <div class="table_th_operation">
            <el-dropdown>
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleSee(item, index)"
                  >查看</el-dropdown-item
                >
                <el-dropdown-item
                  @click.native="handleEdit(item, index)"
                  v-if="item.saleOrderGroupState == 0 && item.hasEditPower"
                  >编辑</el-dropdown-item
                >
                <el-dropdown-item
                  @click.native="handleConfirm(item, index)"
                  v-if="item.saleOrderGroupState == 0"
                  >确认</el-dropdown-item
                >
                <!-- <el-dropdown-item @click.native="handleDeliver(item, index)"
                  >发货设置</el-dropdown-item
                > -->
                <el-dropdown-item
                  @click.native="handleWithdraw(item, index)"
                  v-if="item.saleOrderGroupState == 1"
                  >撤回</el-dropdown-item
                >
                <el-dropdown-item
                  @click.native="handleVoid(item, index)"
                  v-if="item.saleOrderGroupState == 4"
                  >作废</el-dropdown-item
                >
                <el-dropdown-item
                  @click.native="handleCancelOrder(item, index)"
                  v-if="item.saleOrderGroupState == 1"
                  >撤单</el-dropdown-item
                >
                <el-dropdown-item
                  @click.native="handleFinish(item, index)"
                  v-if="item.saleOrderGroupState == 1"
                  >完成</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div
          v-if="item.isShow"
          style="border: 1px solid #e6e6e6; border-top: none"
        >
          <div
            class="product_info_box"
            v-for="(x, i) in item.saleOrderList"
            :key="i"
          >
            <div class="table_head_info">
              <div class="table_th_info flex">
                <span class="key"
                  >协议书号:<span class="val">{{ x.xieYiShuHao }}</span></span
                >
                <span class="key"
                  >生产状态:
                  <el-tag
                    size="small"
                    :type="getProductionState(x.productionState).state"
                    >{{ getProductionState(x.productionState).name }}</el-tag
                  ></span
                >
                <div style="width: 200px" class="flex">
                  <span class="key">生产进度: </span>
                  <div class="cellcontent">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <div class="pt5 pb5">
                        总耗时：{{ getHour(x.productionProgressList) }}
                      </div>
                      <el-table
                        :data="x.productionProgressList"
                        height="300"
                        size="mini"
                      >
                        <el-table-column
                          width="180"
                          property="produceTaskBillNo"
                          label="生产单号"
                        ></el-table-column>
                        <el-table-column
                          width="100"
                          property="machineName"
                          label="设备名称"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="craftName"
                          label="工艺名称"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="craftTaskState"
                          label="工艺状态"
                        >
                          <template #default="children">
                            <el-tag
                              v-if="children.row.craftTaskState == 0"
                              type="info"
                              size="small"
                              >待开始</el-tag
                            >
                            <el-tag
                              v-else-if="children.row.craftTaskState == 1"
                              size="small"
                              >生产中</el-tag
                            >
                            <el-tag
                              v-else-if="children.row.craftTaskState == 2"
                              type="success"
                              size="small"
                              >已完成</el-tag
                            >
                            <el-tag v-else type="warning" size="small"
                              >流转</el-tag
                            >
                          </template>
                        </el-table-column>
                        <el-table-column
                          width="150"
                          property="craftTaskPlanUseTime"
                          label="计划用时"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="planCpMeters"
                          label="计划米数"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="beginProduceTime"
                          label="开始时间"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="finishProduceTime"
                          label="完成时间"
                        ></el-table-column>
                        <el-table-column
                          width="150"
                          property="actualHour"
                          label="实际用时"
                        ></el-table-column>
                      </el-table>
                      <el-progress
                        slot="reference"
                        :percentage="x.progress"
                        :stroke-width="10"
                        :show-text="false"
                        color="#67c23a"
                        style="width: 100px"
                      ></el-progress>
                    </el-popover>
                  </div>
                </div>
                <span class="key"
                  >缴库状态:<span class="val">{{
                    x.handInState == 0 ? "待缴库" : "已缴库"
                  }}</span></span
                >
                <span class="key"
                  >发货状态:<span class="val">{{
                    x.deliverState == 0 ? "待发货" : "已发货"
                  }}</span></span
                >
                <span class="key"
                  >数据状态:<span class="val">{{
                    x.dataBillStateName
                  }}</span></span
                >
              </div>
              <div class="flex">
                <el-button
                  class="mr10"
                  type="text"
                  v-if="x.contractFile"
                  @click="handleContractDownload(x)"
                  ><i class="el-icon-tickets el-icon--left"></i
                  >下载合同</el-button
                >
                <el-button type="text" class="mr10" @click="handleEditRemark(x)" v-if="x.canEditRemarks"
                  ><i class="el-icon-edit"></i>修改备注</el-button
                >
                <div v-if="x.orderProduct">
                  <el-button
                    v-if="x.orderProduct.isLocked == 0"
                    type="text"
                    @click="handlePerfectProduct(x)"
                    ><i class="el-icon-tickets el-icon--left"></i
                    >完善产品</el-button
                  >
                </div>
              </div>
            </div>
            <div class="table_body_info">
              <div class="product_info">
                <div class="product_img">
                  <img
                    :src="
                      x.productColorDraftFileList.length > 0
                        ? x.productColorDraftFileList[0].draftFileUrl
                        : ''
                    "
                    alt=""
                  />
                </div>
                <div class="product_detail" v-if="x.orderProduct">
                  <h3>{{ x.orderProduct.productName }}</h3>
                  <p>
                    <span class="key"
                      >产品编号:<span class="val">{{
                        x.orderProduct.productNumber
                      }}</span></span
                    >
                  </p>
                  <p>
                    <span class="key"
                      >产品类型:<span class="val">{{
                        x.orderProduct.productTypeName
                      }}</span></span
                    >
                  </p>
                  <p>
                    <span class="key"
                      >版本版面:<span class="val"
                        >{{
                          "V" +
                          (x.orderProduct.updateVersion+1)
                        }}{{ x.productLayout || " --" }}</span
                      ></span
                    >
                  </p>
                  <p>
                    <span class="key"
                      >产品尺寸:<span class="val">{{
                        x.orderProduct.productSize
                      }}</span></span
                    >
                  </p>
                  <p>
                    <span class="key"
                      >标签数量:<span class="val">{{
                        x.orderProduct.productTagNumber
                      }}</span></span
                    >
                  </p>
                </div>
              </div>
              <div style="width: 300px; text-align: left">
                <div class="mb10">
                  <span class="key"
                    >客户名称:<span class="val">{{
                      item.customerName
                    }}</span></span
                  >
                </div>
                <div class="mb10">
                  <span class="key"
                    >客户单号:<span class="val">{{
                      x.customerBillNo
                    }}</span></span
                  >
                </div>
                <div class="mb10">
                  <span class="key pr0"
                    >交货日期:<span class="val">{{
                      x.deliveryDate
                        ? x.deliveryDate.split(" ")[0]
                        : x.deliveryDate
                    }}</span></span
                  >
                  <span v-if="x.deliveryDate">
                    <el-tag
                      size="mini"
                      type="danger"
                      v-if="getDateByDays(x.deliveryDate.split(' ')[0]) < 0 &&x.handInState != 1"
                      >延期{{
                        Math.abs(getDateByDays(x.deliveryDate.split(" ")[0]))
                      }}天</el-tag
                    >
                    <el-tag size="mini" type="warning" v-else-if="getDateByDays(x.deliveryDate.split(' ')[0]) > 0"
                      >剩余{{
                        getDateByDays(x.deliveryDate.split(" ")[0])
                      }}天</el-tag
                    >
                  </span>
                </div>
                <div class="mb10">
                  <span class="key"
                    >下单时间:<span class="val">{{
                      item.createTime
                    }}</span></span
                  >
                </div>
                <div class="mb10">
                  <span class="key"
                    >下单人员:<span class="val">{{
                      item.creatorName
                    }}</span></span
                  >
                </div>
              </div>
              <div>
                <el-popover placement="bottom" width="600" trigger="click">
                  <el-table :data="x.orderProductSpecificationList">
                    <el-table-column
                      width="150"
                      property="productSpecificationName"
                      label="型号名称"
                    ></el-table-column>
                    <el-table-column
                      width="100"
                      property="productionQuantity"
                      label="型号数量"
                    >
                    </el-table-column>
                    <el-table-column
                      property="remark"
                      label="备注"
                    ></el-table-column>
                  </el-table>
                  <span slot="reference" style="cursor: pointer"
                    ><span style="color: #3f61f1">{{
                      x.orderProductSpecificationList.length
                    }}</span>
                  </span>
                </el-popover>
              </div>
              <div>
                {{ x.unitPrice !== null ? x.unitPrice : "暂无权限查看" }}
              </div>
              <div>{{ x.productQuantity }}</div>
              <div style="color: red">
                {{ x.totalAmount !== null ? x.totalAmount : "暂无权限查看" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px">
      <pagination
        v-if="query.pageIndex"
        :total="query.total || 0"
        :page.sync="query.pageIndex"
        :limit.sync="query.pageSize"
        @pagination="getOrderList"
      />
    </div>

    <!-- 撤单原因   -->
    <el-dialog
      :title="title + '原因'"
      :visible.sync="reasonVisible"
      :close-on-click-modal="false"
      custom-class="comDialog"
      append-to-body
      width="30%"
      @close="closeCancelDialog"
    >
      <div class="dialogDody">
        <el-form
          ref="cancelForm"
          :model="cancelForm"
          :rules="rules"
          label-width="0px"
          class="dialogForm"
        >
          <el-form-item label="" prop="reason">
            <el-input
              v-model="cancelForm.reason"
              type="textarea"
              :autosize="{ minRows: 3 }"
              placeholder="请输入内容"
              size="mini"
              clearable
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="reasonVisible = false">取 消</el-button>
        <el-button
          :loading="addLableLoading"
          :disabled="addLableLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveReason"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 发货设置   -->
    <el-dialog
      title="发货信息"
      :visible.sync="isShowDeliver"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="16vh"
      width="70%"
    >
      <div class="dialogDody p16">
        <div style="height: 90px">
          <div
            class="btnCon mb10"
            style="
              border: 1px solid #eee;
              border-top: 3px solid #3f61f1;
              height: 50px;
            "
          >
            <div class="flex" style="color: #999aaa">
              <div class="flex1">
                订单单号：<span style="color: #606200">{{
                  rowData.saleOrderGroupNumber
                }}</span>
              </div>
              <div class="flex1">
                客户名称：<span style="color: #606200">{{
                  rowData.customerName
                }}</span>
              </div>
              <div class="flex1"></div>
            </div>
          </div>
          <div class="flex flex_end">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="small"
              @click="handleAddDeliver"
              >新建发货</el-button
            >
          </div>
        </div>
        <div class="table_body">
          <div class="table_head_address mt10">
            <div><span>发货信息</span></div>
            <div><span>发货状态</span></div>
            <div><span>发货明细</span></div>
            <div class="center"><span>操作</span></div>
          </div>
          <div
            style="height: 90%; overflow-y: auto"
            v-if="saleOrderDeliveryList.length > 0"
          >
            <div
              class="table_body_item p8 mb8"
              v-for="(item, index) in saleOrderDeliveryList"
              :key="index"
            >
              <div class="flex">
                <div class="receipt_info mr16">
                  <div class="flag">
                    <span>发货人</span>
                  </div>
                  <div class="address">
                    <h3>{{ item.senderName }}</h3>
                    <p>{{ item.address }}</p>
                    <p>{{ item.senderTelephone }}</p>
                  </div>
                </div>
                <div class="receipt_info">
                  <div class="flag" style="background: #67c23a">
                    <span>收货人</span>
                  </div>
                  <div class="address">
                    <h3>{{ item.receiverName }}</h3>
                    <p>{{ item.receiveAddress }}</p>
                    <p>{{ item.receiveTelephone }}</p>
                  </div>
                </div>
              </div>
              <div class="center">
                <el-tag
                  type="info"
                  size="small"
                  v-if="item.deliveryBillState == 0"
                  >待确认</el-tag
                >
                <el-tag type="success" size="small" v-else>已确认</el-tag>
              </div>
              <div class="center">
                <el-popover placement="bottom" width="800" trigger="click">
                  <el-table :data="detail">
                    <el-table-column
                      width="150"
                      property="productName"
                      label="产品名称"
                    ></el-table-column>
                    <el-table-column
                      width="100"
                      property="productLayout"
                      label="版面"
                    >
                    </el-table-column>
                    <el-table-column
                      width="100"
                      property="productVersion"
                      label="版本"
                    >
                    </el-table-column>
                    <el-table-column
                      width="100"
                      property="productSpecificationName"
                      label="型号名称"
                    >
                    </el-table-column>
                    <el-table-column
                      width="100"
                      property="deliveryQuantity"
                      label="发货数量"
                    >
                    </el-table-column>
                    <el-table-column
                      width="100"
                      property="deliveryBoxCount"
                      label="发货箱数"
                    >
                    </el-table-column>
                    <el-table-column
                      property="deliveryMxRemark"
                      label="备注"
                      width="200"
                    ></el-table-column>
                  </el-table>
                  <span
                    slot="reference"
                    style="cursor: pointer"
                    @click="handleDetailClick(item)"
                    ><span style="color: #3f61f1">{{ item.detailsCount }}</span>
                  </span>
                </el-popover>
              </div>
              <div class="center">
                <div>
                  <el-button
                    size="mini"
                    v-if="item.deliveryBillState == 0"
                    @click="handleConfirmDeliver(item)"
                    >确认</el-button
                  >
                </div>
                <div>
                  <el-button
                    size="mini"
                    @click="handleEditDeliver(item)"
                    v-if="item.deliveryBillState == 0"
                    >编辑</el-button
                  >
                </div>
                <div>
                  <el-button size="mini" @click="handleSeeDeliver(item)"
                    >查看</el-button
                  >
                </div>
                <div>
                  <el-button size="mini" @click="handleDownload(item)"
                    >下载发货单</el-button
                  >
                </div>
                <div>
                  <el-button
                    size="mini"
                    @click="handleDeleteDeliver(item)"
                    v-if="item.deliveryBillState == 0"
                    >删除</el-button
                  >
                </div>
              </div>
            </div>
          </div>
          <el-empty description="暂无发货单" v-else></el-empty>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="'发货信息 - ' + deliverName"
      :visible.sync="isShowDeliverForm"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="16vh"
      width="70%"
    >
      <div class="dialogDody">
        <div class="flex" style="height: 100%">
          <div class="left_tag">
            <p
              class="nav1"
              :class="tabIndex == index ? 'active' : ''"
              v-for="(item, index) in tagList"
              :key="index"
              @click="handleTagClick(item, index)"
            >
              {{ item.title }}
            </p>
          </div>
          <div class="content_info" @scroll="scrollEvent">
            <el-form
              ref="formModel"
              :model="formModel"
              :rules="rules"
              :disabled="deliverState == 'see'"
              label-width="80px"
            >
              <div class="items" id="1">
                <div class="title pl0">
                  <h3>基本信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货单号:">
                      <el-input
                        v-model="formModel.deliveryBillNo"
                        placeholder="保存后系统自动生成"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建日期:">
                      <el-input
                        :value="
                          deliverState == 'add'
                            ? getDate()
                            : formModel.createTime
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="创建人员:">
                      <el-input
                        :value="
                          deliverState == 'add' ? name : formModel.createByName
                        "
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="发货类型:">
                      <el-select
                        filterable
                        v-model="formModel.deliveryType"
                        style="width: 100%"
                        size="small"
                        disabled
                        placeholder="请选择"
                      >
                        <el-option label="成品发货" :value="1"> </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="订单单号:">
                      <el-input
                        v-model="rowData.saleOrderGroupNumber"
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="客户名称:">
                      <el-input
                        v-model="rowData.customerName"
                        placeholder="请输入内容"
                        size="small"
                        disabled
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="2">
                <div class="title pl0">
                  <h3>寄方信息</h3>
                  <el-button
                    type="text"
                    @click="handleUpdateAddress"
                    v-if="deliverState != 'see'"
                    ><i
                      class="el-icon-refresh-right"
                      style="font-size: 16px"
                    ></i
                    >更新地址</el-button
                  >
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-select
                        filterable
                        v-model="formModel.companyName"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                        value-key="companyName"
                        @change="handleCompanyChange"
                      >
                        <el-option
                          :label="item.companyName"
                          :value="item"
                          v-for="(item, index) in companyList"
                          :key="index"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModel.senderName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModel.senderTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                        v-model="formModel.addressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                        @change="handleAreaChange"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModel.address"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="3">
                <div class="title pl0">
                  <h3>收方信息</h3>
                  <div class="more" v-if="deliverState != 'see'">
                    <el-button type="text" @click="handleAddressBook"
                      ><i class="el-icon-collection" style="font-size: 16px"></i
                      >使用地址簿</el-button
                    >
                    <div class="line"></div>
                    <el-button type="text" @click="handleSaveAddress"
                      ><i class="el-icon-folder-add" style="font-size: 16px"></i
                      >保存新地址</el-button
                    >
                  </div>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="姓名:">
                      <el-input
                        v-model="formModel.receiverName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="电话:">
                      <el-input
                        v-model="formModel.receiveTelephone"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="地区:">
                      <el-cascader
                        v-model="formModel.receiveAddressArr"
                        style="width: 100%"
                        size="small"
                        :options="address"
                        :props="{ label: 'areaName', value: 'areaCode' }"
                        @change="receiverAreaChange"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="详细地址:">
                      <el-input
                        v-model="formModel.receiveAddress"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="公司名称:">
                      <el-input
                        v-model="formModel.receiveCompanyName"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="4">
                <div class="title pl0">
                  <h3>其他信息</h3>
                </div>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="收货方式:">
                      <el-select
                        filterable
                        v-model="formModel.receivingWay"
                        placeholder="收货方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in receivingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递方式:">
                      <el-select
                        filterable
                        v-model="formModel.expressWay"
                        style="width: 100%"
                        size="small"
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in sendingTypeList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递单号:">
                      <el-input
                        v-model="formModel.expressBillNo"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="送货时间:">
                      <el-date-picker
                        v-model="formModel.expressTime"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        style="width: 100%"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="快递费用:">
                      <el-input
                        v-model="formModel.expressCost"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="付费方式:">
                      <el-select
                        filterable
                        v-model="formModel.paymentWay"
                        placeholder="请选择付费方式"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in logisticsPaidList"
                          :key="item.code"
                          :label="item.name"
                          :value="item.code"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="24">
                  <el-col :span="8">
                    <el-form-item label="费用部门:">
                      <el-select
                        filterable
                        v-model="formModel.costAssumeDepartment"
                        placeholder="请选择费用部门"
                        style="width: 100%"
                        size="small"
                      >
                        <el-option
                          v-for="item in departmentList"
                          :key="item.departmentCode"
                          :label="item.departmentName"
                          :value="item.departmentCode"
                        />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="公斤数:">
                      <el-input
                        v-model="formModel.expressGoodsWeight"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="件数:">
                      <el-input
                        v-model="formModel.expressGoodsCount"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="items" id="5">
                <div class="title pl0">
                  <h3>明细</h3>
                  <el-button
                    type="text"
                    @click="getDeliverDetail"
                    v-if="deliverState != 'see'"
                    ><i
                      class="el-icon-refresh-right"
                      style="font-size: 16px"
                    ></i
                    >更新明细</el-button
                  >
                </div>
                <el-table :data="formModel.fhMxList">
                  <el-table-column
                    width="190"
                    property="productName"
                    label="产品名称"
                    show-overflow-tooltip
                  ></el-table-column>
                  <el-table-column
                    width="100"
                    property="productLayout"
                    label="版面"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productVersion"
                    label="版本"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productSpecificationName"
                    label="型号名称"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productStockQuantity"
                    label="库存数量"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="waitDeliveryQuantity"
                    label="订单待发货"
                  >
                  </el-table-column>
                  <el-table-column
                    property="deliveryQuantity"
                    width="100"
                    label="发货数量"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryQuantity"
                        placeholder="请输入内容"
                        size="small"
                        type="number"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="stockBoxCount"
                    label="库存箱数"
                  >
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="kilogramQuantity"
                    label="公斤数"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.kilogramQuantity"
                        placeholder="请输入内容"
                        size="small"
                        type="number"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="230"
                    property="produceDate"
                    label="生产日期"
                  >
                    <template #default="scope">
                      <el-date-picker
                        v-model="scope.row.produceDate"
                        value-format="yyyy-MM-dd"
                        type="date"
                        size="small"
                        placeholder="选择日期"
                      >
                      </el-date-picker>
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="100"
                    property="productUnit"
                    label="单位"
                  >
                  </el-table-column>
                  <el-table-column
                    property="deliveryBoxCount"
                    width="100"
                    label="发货箱数"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryBoxCount"
                        placeholder="请输入内容"
                        size="small"
                        type="number"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    property="deliveryMxRemark"
                    width="250"
                    label="备注"
                  >
                    <template #default="scope">
                      <el-input
                        v-model="scope.row.deliveryMxRemark"
                        placeholder="请输入内容"
                        size="small"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    width="80"
                    label="操作"
                    fixed="right"
                    v-if="deliverState != 'see'"
                  >
                    <template #default="scope">
                      <el-button
                        type="text"
                        size="small"
                        @click="handleDeleteDetailRow(scope.row, scope.$index)"
                        v-if="formModel.fhMxList.length > 1"
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowDeliverForm = false"
          >取 消</el-button
        >
        <!--  保存      -->
        <el-button
          v-if="deliverState != 'see'"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="handleSaveDeliver"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 地址簿   -->
    <el-dialog
      title="地址簿"
      :visible.sync="isShowAddress"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="bodyNoPadDialog bigDialog"
      height="16vh"
      width="70%"
    >
      <div class="dialogDody p16">
        <div class="flex flex_between" style="border-bottom: none">
          <!--      搜索框-->
          <div class="">
            <el-input
              v-model="materalSearch.likeWords"
              placeholder="输入关键字"
              size="small"
            >
              <el-select
                filterable
                v-model="materalSearch.select"
                slot="prepend"
                placeholder="请选择"
                @change="handleSearchChange"
              >
                <el-option label="收货人" :value="1"></el-option>
                <el-option label="联系电话" :value="2"></el-option>
              </el-select>
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="handleAddressSearch"
              ></el-button>
            </el-input>
          </div>
          <div>
            <el-button
              type="primary"
              class="mr5"
              size="small"
              @click="handleCreateAddress"
              ><i class="iconfont mr5 f14 plusIcon"></i>新建
            </el-button>
          </div>
        </div>
        <div class="tableBox lastTdNoBorder">
          <div class="tt flex">
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData"
              @click="handleUseAddress"
            >
              使用
            </el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData"
              @click="handleEditRow"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData"
              @click="handleDeleteAddressRow"
            >
              删除
            </el-button>
            <el-button
              type="primary"
              size="mini"
              :disabled="!currentData || currentData.isDefaultReceive != 0"
              @click="handleSetDefault"
            >
              设为默认
            </el-button>
          </div>
          <el-table
            :data="receiveCompanyList"
            @current-change="handleCurrentChange"
            @row-dblclick="tableDblclick"
            highlight-current-row
          >
            <el-table-column
              width="150"
              property="contactPersonName"
              label="收货人"
            >
              <template #default="scope">
                <span>{{ scope.row.contactPersonName }}</span>
                <el-tag
                  type="danger"
                  size="small"
                  effect="dark"
                  v-if="scope.row.isDefaultReceive == 1"
                >
                  默认
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              width="130"
              property="contactTelephone"
              label="联系电话"
            >
            </el-table-column>
            <el-table-column
              width="200"
              property="fullReceiveAddress"
              show-overflow-tooltip
              label="地区"
            >
            </el-table-column>
            <el-table-column
              width="200"
              property="detailedAddress"
              show-overflow-tooltip
              label="详细地址"
            >
            </el-table-column>
            <el-table-column
              property="companyName"
              label="公司名称"
            ></el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>

    <!-- 新建地址   -->
    <el-dialog
      :title="'地址簿-' + titleName"
      :visible.sync="isAddMaterriel"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="comDialog "
      width="30%"
      @close="resetForm"
    >
      <div class="dialogDody">
        <div class="addWuliaoBox">
          <el-form
            ref="materForm"
            :model="materForm"
            :rules="materFormRules"
            label-width="80px"
            class="dialogForm dialogInlineForm"
          >
            <el-row>
              <el-col>
                <el-form-item label="姓名" prop="contactPersonName">
                  <el-input
                    v-model="materForm.contactPersonName"
                    size="mini"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="电话" prop="contactTelephone">
                  <el-input
                    v-model="materForm.contactTelephone"
                    size="mini"
                    placeholder="请输入电话"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="地址" prop="country">
                  <el-cascader
                    v-model="materForm.country"
                    placeholder="省/市/区(地址联动)"
                    size="mini"
                    :options="address"
                    :props="{ label: 'areaName', value: 'areaCode' }"
                    @change="areaChange"
                  />
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="详细地址" prop="detailedAddress">
                  <el-input
                    v-model="materForm.detailedAddress"
                    size="mini"
                    placeholder="请输入详细地址"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="公司名称">
                  <el-input
                    v-model="materForm.companyName"
                    size="mini"
                    placeholder="请输入公司名称"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="默认地址" prop="isDefaultReceive">
                  <el-switch
                    v-model="materForm.isDefaultReceive"
                    :active-value="1"
                    :inactive-value="0"
                  ></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isAddMaterriel = false">取 消</el-button>
        <!--  保存      -->
        <el-button
          v-if="ops != 'see'"
          v-loading="addMaterrielLoading"
          :disabled="addMaterrielLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveMater"
          >保存</el-button
        >
      </div>
    </el-dialog>

    <!-- 修改备注   -->
    <el-dialog
      title="修改备注"
      :visible.sync="isShowEditRemark"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      custom-class="comDialog "
      width="30%"
    >
      <div class="dialogDody">
        <div class="addWuliaoBox">
            <el-input
              v-model="remark"
              :rows="3"
              type="textarea"
              placeholder="请输入备注"
            />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isShowEditRemark = false">取 消</el-button>
        <!--  保存      -->
        <el-button
          v-loading="remarkLoading"
          :disabled="remarkLoading"
          element-loading-spinner="el-icon-loading"
          type="primary"
          size="mini"
          @click="saveRemark"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  <script>
import { arraySort } from "@/utils";
import Pagination from "@/components/Pagination";
import { mapGetters } from "vuex";
export default {
  name: "PlaceAnOrderNew",
  components: {
    Pagination,
  },
  data() {
    return {
      tagList: [
        {
          title: "基本信息",
        },
        {
          title: "寄方信息",
        },
        {
          title: "收方信息",
        },
        {
          title: "其他信息",
        },
        {
          title: "明细",
        },
      ],
      tabIndex: 0,
      deliverState: "",
      remark: "",
      saleOrderCode:'',
      isShowEditRemark:false,
      remarkLoading:false,
      formModel: {
        deliveryType: 1,
        customerCode: "",
        receiveAddressCode: "",
        receivingWay: "",
        expressWay: "",
        expressBillNo: "",
        expressTime: "",
        expressCost: 0,
        addressArr: [],
        receiveAddressArr: [],
        paymentWay: "",
        costAssumeDepartment: "",
        expressGoodsWeight: 0,
        expressGoodsCount: 0,
        deliveryRemark: "",
        saleOrderGroupCode: "",
        companyName: "",
        senderName: "",
        senderTelephone: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        address: "",
        receiveCompanyName: "",
        receiverName: "",
        receiveTelephone: "",
        receiveProvinceCode: "",
        receiveCityCode: "",
        receiveAreaCode: "",
        receiveAddress: "",
        fhMxList: [
          {
            deliveryMxID: 0, //发货单明细主键ID
            deliveryBillNo: "", //	发货单号
            associationOrderNo: "", //关联业务订单号
            productNo: "", //成品代码（可关联得到：成品类型、产品名称、产品单位、库存总箱数、库存总数量、产品版本和印刷版面等）
            productStockNo: "", //成品规格库存代码
            deliveryBoxCount: 0, //发货箱数
            deliveryQuantity: 0, //发货数量
            deliveryMxRemark: "", //发货明细备注
          },
        ],
      },
      formModelCopy: {},
      detail: [], //发货明细
      saleOrderDeliveryList: [], //发货列表
      receivingTypeList: [], // 收货方式列表
      logisticsPaidList: [], // 付费方式
      sendingTypeList: [], // 快递方式
      departmentList: [], // 费用部门
      companyList: [], //寄方公司
      receiveCompanyList: [], //收方公司
      shippingAddress: [],
      address: [],
      isShowAddress: false,
      ops: "",
      isAddMaterriel: false,
      formObj: {},
      materalSearch: {
        select: 1,
        likeWords: "",
        customerCode: "",
        contactPersonName: "",
        contactTelephone: "",
      },
      addMaterrielLoading: false,
      materForm: {
        customerCode: "", //客户编码
        contactPersonName: "", //联系人姓名
        companyName: "", //公司名称
        contactPersonSex: 0, //联系人性别：1男；2女
        contactTelephone: "", //联系人电话
        province: "", //所在省代码
        city: "", //所在市代码
        country: "", //所在县代码
        detailedAddress: "", //详细收货地址
        isDefaultReceive: 0, //isDefaultReceive
      },

      updateAddressForm: {
        //更新地址参数
        senderInformationID: 0,
        senderInformationCode: "",
        companyName: "",
        customerCode: "",
        senderName: "",
        senderTelephone: "",
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        address: "",
      },

      materFormRules: {
        contactPersonName: [
          {
            required: true,
            message: "请填写姓名",
            trigger: ["change", "blur"],
          },
        ],
        contactTelephone: [
          {
            required: true,
            message: "请填写电话",
            trigger: ["change", "blur"],
          },
        ],
        country: [
          { required: true, message: "请选择省市区", trigger: "change" },
        ],
        detailedAddress: [
          { required: true, message: "请输入具体地址", trigger: "change" },
        ],
      },

      query: {
        pageIndex: 1,
        pageSize: 30,
        queryDataBaseFiled: "",
        likeWords: "",
        isShowDisabled: 0,
        saleOrderGroupState: -1,
      },
      isShowDeliver: false,
      isShowDeliverForm: false,
      rowData: "",
      orderList: [], //订单列表
      screenList: [
        {
          label: "订单单号",
          value: "saleOrderGroupNumber",
        },
        {
          label: "产品名称",
          value: "productName",
        },
        {
          label: "协议书号",
          value: "xieYiShuHao",
        },
        {
          label: "客户名称",
          value: "customerName",
        },
        {
          label: "客户单号",
          value: "customerBillNo",
        },
      ],

      stateList: [
        {
          label: "全部订单",
          value: -1,
        },
        {
          label: "待确认订单",
          value: 0,
        },
        {
          label: "已确认订单",
          value: 1,
        },
        {
          label: "已作废订单",
          value: 2,
        },
        {
          label: "已撤单订单",
          value: 3,
        },
        {
          label: "已完成订单",
          value: 4,
        },
        {
          label: "即将到期订单",
          value: 5,
        },
        {
          label: "已超期订单",
          value: 6,
        },
      ],
      currentData: "",

      cancelForm: {
        reason: "",
      },
      reasonVisible: false,
      addLableLoading: false,
      title: "",
      rules: {
        reason: [
          {
            required: true,
            message: "请填写原因",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  beforeDestroy(){
    console.log('销毁前')
  },
  destroyed(){
    console.log('销毁后')
  },
  computed: {
    ...mapGetters(["name"]),
    titleName() {
      if (this.ops == "add") {
        return "新建";
      } else if (this.ops == "edit") {
        return "修改";
      } else if (this.ops == "see") {
        return "查看";
      }
    },

    deliverName() {
      if (this.deliverState == "add") {
        return "新建";
      } else if (this.deliverState == "edit") {
        return "修改";
      } else if (this.deliverState == "see") {
        return "查看";
      }
    },
  },
  created() {
    this.getOrderList();
    //获取地区
    this.getArea();
    //收货方式
    this.getReceivingList();
    //付费方式
    this.getPayTypeList();
    //费用部门
    this.getDepartmentList();
    //快递方式
    this.getSendList();

    this.formObj = JSON.parse(JSON.stringify(this.materForm));
    this.formModelCopy = JSON.parse(JSON.stringify(this.formModel));
    this.query.queryDataBaseFiled = this.screenList[0].value;
  },
  mounted() {},
  methods: {
    //获取订单列表
    getOrderList() {
      this.$api.business.GetPageSaleOrderGroup(this.query).then((res) => {
        res.list.forEach((item) => {
          item.isShow = true;
        });
        this.orderList = res.list;
        this.query.total = res.totalCount;
      });
    },

    //获取天数
    getDateByDays(date) {
      let myDate = new Date(new Date().getTime() + 8 * 60 * 60 * 1000);
      let time = myDate.toJSON().split("T").join(" ").substr(0, 19).split(" ");
      let d1 = Date.parse(new Date(time[0]));
      let d2 = Date.parse(new Date(date));
      // 时间戳相减 / 天数
      let day = parseInt((d2 - d1) / (1000 * 60 * 60 * 24));
      return day;
    },

    //下载合同
    handleContractDownload(x) {
      const elink = document.createElement("a");
      elink.download = x.contractName; //下载文件名称,
      elink.style.display = "none";
      elink.href = x.contractFile;
      document.body.appendChild(elink);
      elink.click();
      document.body.removeChild(elink);
    },

    handleEditRemark(row){
      this.remark = row.remark
      this.saleOrderCode = row.saleOrderCode
      this.isShowEditRemark = true
    },

    saveRemark(){
      this.remarkLoading = true
      let obj = {
        remark:this.remark,
        saleOrderCode:this.saleOrderCode
      }
      this.$api.business.UpdateRemarksBySaleOrder(obj).then(res=>{
        this.$message.success('修改成功')
        this.isShowEditRemark = false
        this.remarkLoading = false
        this.getOrderList()
      }).catch(()=>{
        this.remarkLoading = false
      })
    },

    //表格单击事件
    handleCurrentChange(row) {
      this.currentData = row;
    },

    //下载发货单
    handleDownload(row) {
      let parmas = {
        templateTypeCode: "MBLX0006", //	模板类型编号
        customerCode: row.customerCode,
        condition: {
          DeliveryBillNo: row.deliveryBillNo,
        }, //查询条件
      };
      this.$api.system.DownLoadTemplate(parmas).then((res) => {
        window.open(res);
      });
    },

    //使用地址
    handleUseAddress() {
      this.formModel.receiveCompanyName = this.currentData.companyName;
      this.formModel.receiverName = this.currentData.contactPersonName;
      this.formModel.receiveTelephone = this.currentData.contactTelephone;
      this.formModel.receiveProvinceCode = this.currentData.province;
      this.formModel.receiveCityCode = this.currentData.city;
      this.formModel.receiveAreaCode = this.currentData.country;
      this.formModel.receiveAddress = this.currentData.detailedAddress;
      this.formModel.receiveAddressArr = this.currentData.country;
      this.isShowAddress = false;
    },

    //地址簿表格双击事件
    tableDblclick(row) {
      this.formModel.receiveCompanyName = row.companyName;
      this.formModel.receiverName = row.contactPersonName;
      this.formModel.receiveTelephone = row.contactTelephone;
      this.formModel.receiveProvinceCode = row.province;
      this.formModel.receiveCityCode = row.city;
      this.formModel.receiveAreaCode = row.country;
      this.formModel.receiveAddress = row.detailedAddress;
      this.formModel.receiveAddressArr = row.country;
      console.log(this.formModel.receiveAddressArr);
      this.isShowAddress = false;
    },

    //编辑地址薄行
    handleEditRow() {
      this.ops = "edit";
      this.materForm = JSON.parse(JSON.stringify(this.currentData));
      this.isAddMaterriel = true;
    },

    //删除地址簿行
    handleDeleteAddressRow() {
      this.$confirm("是否删除该地址?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.$api.business
            .DeleteReceiveAddress({
              receiveAddressID: this.currentData.receiveAddressID,
            })
            .then(() => {
              this.$message.success("删除成功");
              this.getReceiveCompanyList();
            });
        })
        .catch(() => {});
    },

    //设为默认
    handleSetDefault() {
      let obj = {
        receiveAddressID: this.currentData.receiveAddressID,
        customerCode: this.rowData.customerCode,
      };
      this.$api.business.SetDefaultReceiveAddress(obj).then((res) => {
        this.$message.success("设置成功");
        this.getReceiveCompanyList();
      });
    },

    //点击搜索
    handleSearch() {
      this.query.pageIndex = 1;
      this.getOrderList();
    },

    //筛选下拉选择事件
    handleSelectChange() {
      this.query.pageIndex = 1;
      this.getOrderList();
    },

    //使用地址簿
    handleAddressBook() {
      // this.getShippingAdress();
      this.getReceiveCompanyList();
      this.isShowAddress = true;
    },

    //新建地址
    handleCreateAddress() {
      this.isAddMaterriel = true;
      this.ops = "add";
    },

    // 获取送货方式数据列表 receivingTypeList
    getSendList() {
      const params = {
        DictionaryCode: "SendingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.sendingTypeList = res;
      });
    },

    getDate() {
      return this.dayjs().format("YYYY-MM-DD");
    },

    // 获取收货方式数据列表
    getReceivingList() {
      const params = {
        DictionaryCode: "ReceivingType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.receivingTypeList = res;
      });
    },
    // 获取付费方式数据列表
    getPayTypeList() {
      const params = {
        DictionaryCode: "LogisticsPaidType",
      };
      this.$api.warehouse.GetDictionaryByCode(params).then((res) => {
        this.logisticsPaidList = res;
      });
    },
    // 获取费用部门数据列表
    getDepartmentList() {
      this.$api.warehouse.GetDepartmentTreeData({}).then((res) => {
        this.departmentList = res;
      });
    },

    //重置表单
    resetForm() {
      this.materForm = JSON.parse(JSON.stringify(this.formObj));
    },

    //点击发货明细
    handleDetailClick(row) {
      this.detail = [];
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.detail = res.detailList;
      });
    },

    //获取寄方公司
    getCompanyList() {
      let obj = {
        queryBy: 0,
        queryValue: this.rowData.customerCode,
      };
      this.$api.business.GetSenderInformation(obj).then((res) => {
        this.companyList = res;
      });
    },

    //寄方公司选择事件
    handleCompanyChange(item) {
      this.formModel.companyName = item.companyName;
      this.formModel.senderName = item.senderName;
      this.formModel.senderTelephone = item.senderTelephone;
      this.formModel.provinceCode = item.provinceCode;
      this.formModel.cityCode = item.cityCode;
      this.formModel.areaCode = item.areaCode;
      this.formModel.address = item.address;
      this.formModel.addressArr = item.areaCode;
      this.updateAddressForm = item;
      console.log(item);
    },

    //更新地址
    handleUpdateAddress() {
      this.updateAddressForm.companyName = this.formModel.companyName;
      this.updateAddressForm.senderName = this.formModel.senderName;
      this.updateAddressForm.senderTelephone = this.formModel.senderTelephone;
      this.updateAddressForm.provinceCode = this.formModel.provinceCode;
      this.updateAddressForm.cityCode = this.formModel.cityCode;
      this.updateAddressForm.areaCode = this.formModel.areaCode;
      this.updateAddressForm.address = this.formModel.address;
      this.$api.business
        .UpdateSenderInformation(this.updateAddressForm)
        .then(() => {
          this.$message.success("保存成功");
          this.getCompanyList();
        });
    },

    //获取收货方公司
    getReceiveCompanyList() {
      this.materalSearch.customerCode = this.rowData.customerCode;
      this.$api.business
        .GetMatchCustomerReceiveAddresss(this.materalSearch)
        .then((res) => {
          this.receiveCompanyList = res;
          this.currentData = "";
        });
    },

    //地址搜索下拉
    handleSearchChange(val) {
      if (val == 1) {
        this.materalSearch.contactPersonName = this.materalSearch.likeWords;
        this.materalSearch.contactTelephone = "";
      } else if (val == 2) {
        this.materalSearch.contactPersonName = "";
        this.materalSearch.contactTelephone = this.materalSearch.likeWords;
      }
    },

    getHour(list) {
      let sum = 0;
      list.forEach((item) => {
        sum += item.actualHour;
      });
      return sum;
    },

    //删除发货设置明细
    handleDeleteDetailRow(row, index) {
      this.formModel.fhMxList.splice(index, 1);
      console.log(666);
    },

    //地址搜索点击事件
    handleAddressSearch() {
      if (this.materalSearch.select == 1) {
        this.materalSearch.contactPersonName = this.materalSearch.likeWords;
        this.materalSearch.contactTelephone = "";
      } else if (this.materalSearch.select == 2) {
        this.materalSearch.contactPersonName = "";
        this.materalSearch.contactTelephone = this.materalSearch.likeWords;
      }
      this.getReceiveCompanyList();
    },

    //寄方地址
    handleAreaChange(val) {
      this.formModel.provinceCode = val ? val[0] : "";
      this.formModel.cityCode = val ? val[1] : "";
      this.formModel.areaCode = val ? val[2] : "";

      this.updateAddressForm.provinceCode = val ? val[0] : "";
      this.updateAddressForm.cityCode = val ? val[1] : "";
      this.updateAddressForm.areaCode = val ? val[2] : "";
    },

    //收方地址
    receiverAreaChange(val) {
      this.formModel.receiveProvinceCode = val ? val[0] : "";
      this.formModel.receiveCityCode = val ? val[1] : "";
      this.formModel.receiveAreaCode = val ? val[2] : "";
    },

    //保存发货设置
    handleSaveDeliver() {
      if (this.deliverState == "add") {
        this.$api.business.AddProduceLogistics(this.formModel).then(() => {
          this.$message.success("保存成功");
          this.getDeliveryList();
          this.isShowDeliverForm = false;
        });
      } else if (this.deliverState == "edit") {
        this.$api.business.UpdateProduceLogistics(this.formModel).then(() => {
          this.$message.success("修改成功");
          this.getDeliveryList();
          this.isShowDeliverForm = false;
        });
      }
    },

    //保存电话薄
    saveMater() {
      this.materForm.customerCode = this.rowData.customerCode;
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          if (this.ops == "add") {
            const parmas = this.materForm;
            this.$api.business
              .AddReceiveAddress(parmas)
              .then(() => {
                this.$message({
                  message: "新建成功",
                  type: "success",
                });
                this.isAddMaterriel = false;
                this.getReceiveCompanyList();
              })
              .catch(() => {
                // this.addLableLoading = false;
              });
          } else if (this.ops == "edit") {
            const parmas = this.materForm;
            this.$api.business
              .UpdateReceiveAddress(parmas)
              .then(() => {
                // 获取客户收货地址
                // this.getShippingAdress();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.isAddMaterriel = false;
                this.getReceiveCompanyList();
              })
              .catch(() => {
                // this.addLableLoading = false
              });
          }
        }
      });
    },

    //保存新地址
    handleSaveAddress() {
      let parmas = {
        customerCode: this.rowData.customerCode, //客户编码
        contactPersonName: this.formModel.receiverName, //联系人姓名
        companyName: this.formModel.receiveCompanyName, //公司名称
        contactPersonSex: 0, //联系人性别：1男；2女
        contactTelephone: this.formModel.receiveTelephone, //联系人电话
        province: this.formModel.receiveProvinceCode, //所在省代码
        city: this.formModel.receiveCityCode, //所在市代码
        country: this.formModel.receiveAreaCode, //所在县代码
        detailedAddress: this.formModel.receiveAddress, //详细收货地址
        isDefaultReceive: 0, //isDefaultReceive
      };
      this.$api.business
        .AddReceiveAddress(parmas)
        .then(() => {
          this.$message({
            message: "新建成功",
            type: "success",
          });
          this.isAddMaterriel = false;
          this.getReceiveCompanyList();
        })
        .catch(() => {
          // this.addLableLoading = false;
        });
    },

    // 获取客户收货地址
    getShippingAdress() {
      const parmas = {
        customerCode: this.rowData.customerCode,
      };
      this.$api.business.QueryCustomersReceiveAddresses(parmas).then((res) => {
        this.shippingAddress = res;
      });
    },

    //详情滑动事件
    scrollEvent(e) {
      let scrollItems = document.querySelectorAll(".items");
      for (let i = scrollItems.length - 1; i >= 0; i--) {
        // 判断滚动条滚动距离是否大于当前滚动项可滚动距离
        let judge =
          e.target.scrollTop >=
          scrollItems[i].offsetTop - scrollItems[0].offsetTop;
        if (judge) {
          this.tabIndex = i;
          break;
        }
      }
      // 滚动条触底了
      if (
        e.srcElement.scrollTop + e.srcElement.offsetHeight ===
        e.srcElement.scrollHeight
      ) {
        // this.tabIndex = this.tagList.length
      }
    },

    //左侧tab栏点击事件
    handleTagClick(item, index) {
      this.tabIndex = index;
      let jump = document.querySelectorAll(".items");
      jump[index].scrollIntoView({ block: "start", behavior: "smooth" });
    },

    //新建订单
    handleCreateOrder() {
      this.$router.push({
        path: "/business/placeAnOrderNewDetail", // 跳转的路径
        query: {
          type: "add",
          hasEditPower: true,
        },
      });
    },

    //完善产品
    handlePerfectProduct(data) {
      this.$router.push({
        path: "/business/productDetail", // 跳转的路径
        query: {
          productCode: data.orderProduct.productCode,
          type: "see",
          isLocked: data.orderProduct.isLocked == 0 ? "待锁定" : "已锁定",
        },
      });
    },

    //查看
    handleSee(row) {
      this.$router.push({
        path: "/business/placeAnOrderNewDetail", // 跳转的路径
        query: {
          type: "see",
          orderType: row.saleOrderGroupState,
          saleOrderGroupCode: row.saleOrderGroupCode,
          hasEditPower: row.hasEditPower,
        },
      });
    },
    //编辑
    handleEdit(row) {
      this.$router.push({
        path: "/business/placeAnOrderNewDetail", // 跳转的路径
        query: {
          type: "edit",
          saleOrderGroupCode: row.saleOrderGroupCode,
          hasEditPower: row.hasEditPower,
        },
      });
    },

    //发货设置
    handleDeliver(row) {
      this.rowData = row;
      this.getDeliveryList();
      this.isShowDeliver = true;
    },

    //获取发货列表
    getDeliveryList() {
      let obj = {
        queryBy: 0,
        queryValue: this.rowData.saleOrderGroupCode,
      };
      this.$api.business.GetSaleOrderDeliveryList(obj).then((res) => {
        this.saleOrderDeliveryList = res;
        console.log(this.saleOrderDeliveryList);
      });
    },

    //编辑发货单
    handleEditDeliver(row) {
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.formModel = res;
        this.$set(this.formModel, "fhMxList", this.formModel.detailList);
        // this.formModel.fhMxList = this.formModel.detailList;
        this.formModel.addressArr = this.formModel.areaCode;
        this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;
        this.deliverState = "edit";
        this.isShowDeliverForm = true;
      });
    },

    //查看发货单
    handleSeeDeliver(row) {
      let obj = {
        queryBy: 0,
        queryValue: row.deliveryBillNo,
      };
      this.$api.business.GetSaleOrderDeliveryDetail(obj).then((res) => {
        this.formModel = res;
        this.$set(this.formModel, "fhMxList", this.formModel.detailList);
        // this.formModel.fhMxList = this.formModel.detailList;
        this.formModel.addressArr = this.formModel.areaCode;
        this.formModel.receiveAddressArr = this.formModel.receiveAreaCode;
        this.deliverState = "see";
        this.isShowDeliverForm = true;
      });
    },

    //确认发货单
    handleConfirmDeliver(row) {
      this.$confirm("是否确认该发货单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.$api.business
            .SureProduceLogistics({ entityID: row.deliveryID })
            .then(() => {
              this.$message.success("确认成功");
              this.getDeliveryList();
            });
        })
        .catch(() => {});
    },

    //删除发货单
    handleDeleteDeliver(row) {
      this.$confirm("是否确认删除该发货单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          let obj = {
            entityID: row.deliveryID,
            entityCode: "",
          };
          this.$api.business.DeleteProduceLogistics(obj).then((res) => {
            this.$message.success("删除成功");
            this.getDeliveryList();
          });
        })
        .catch(() => {});
    },

    //新建发货
    handleAddDeliver() {
      this.isShowDeliverForm = true;
      this.formModel = JSON.parse(JSON.stringify(this.formModelCopy));
      this.deliverState = "add";
      this.formModel.customerCode = this.rowData.customerCode;
      this.formModel.saleOrderGroupCode = this.rowData.saleOrderGroupCode;
      this.getCompanyList();
      this.getReceiveCompanyList();
      this.getDeliverDetail();
    },

    //获取发货明细
    getDeliverDetail() {
      let obj = {
        queryBy: 0,
        queryValue: this.rowData.saleOrderGroupCode,
      };
      this.$api.business
        .GetSaleOrderDeliveryMxBySaleOrderGroupCode(obj)
        .then((res) => {
          this.formModel.fhMxList = [];
          this.$set(this.formModel, "fhMxList", res);
          // this.formModel.fhMxList = res;
          console.log(this.formModel.fhMxList);
        });
    },

    // 选择地址
    areaChange(val) {
      this.materForm.province = val ? val[0] : "";
      this.materForm.city = val ? val[1] : "";
      this.materForm.country = val ? val[2] : "";
    },

    // 地区联动数据
    getArea() {
      this.$api.common.GetTreeAreaDataList().then((res) => {
        this.address = res;
      });
    },

    //确认
    handleConfirm(row) {
      this.$confirm("是否确认该订单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.saveOrderState(row.saleOrderGroupCode, 1);
        })
        .catch(() => {});
    },
    //撤回
    handleWithdraw(row) {
      this.$confirm("是否撤回该订单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.saveOrderState(row.saleOrderGroupCode, 0);
        })
        .catch(() => {});
    },

    //撤单
    handleCancelOrder(row) {
      this.reasonVisible = true;
      this.title = "撤单";
      this.rowSaleOrderGroupCode = row.saleOrderGroupCode;
      // this.saveOrderState(row.saleOrderGroupCode, 3);
    },

    //保存原因
    saveReason() {
      this.$refs.cancelForm.validate((valid) => {
        if (valid) {
          if (this.title == "撤单") {
            this.saveOrderState(this.rowSaleOrderGroupCode, 3);
          } else {
            this.saveOrderState(this.rowSaleOrderGroupCode, 2);
          }
        }
      });
    },

    //作废
    handleVoid(row) {
      this.reasonVisible = true;
      this.title = "作废";
      this.rowSaleOrderGroupCode = row.saleOrderGroupCode;
    },
    //完成
    handleFinish(row) {
      this.$confirm("是否完成该订单?", "提示", {
        confirmButtonText: "是",
        cancelButtonText: "否",
        type: "warning",
      })
        .then(() => {
          this.saveOrderState(row.saleOrderGroupCode, 4);
        })
        .catch(() => {});
    },

    //订单状态
    getOrderState(state) {
      let obj = {
        name: "",
        state: "",
      };
      if (state == 0) {
        obj.name = "待确认";
        obj.state = "info";
      } else if (state == 1) {
        obj.name = "已确认";
        obj.state = "primary";
      } else if (state == 2) {
        obj.name = "已作废";
        obj.state = "warning";
      } else if (state == 3) {
        obj.name = "已撤单";
        obj.state = "danger";
      } else {
        obj.name = "已完成";
        obj.state = "success";
      }
      return obj;
    },

    //生产状态
    getProductionState(state) {
      let obj = {
        name: "",
        state: "",
      };
      if (state == 0) {
        obj.name = "待生产";
        obj.state = "info";
      } else if (state == 1) {
        obj.name = "生产中";
        obj.state = "primary";
      } else if (state == 2) {
        obj.name = "已完成";
        obj.state = "success";
      }
      return obj;
    },

    //保存订单状态
    saveOrderState(saleOrderGroupCode, state) {
      let obj = {
        saleOrderGroupCode: saleOrderGroupCode,
        state: state,
        reason: this.cancelForm.reason,
      };
      this.$api.business.UpdateSaleOrderGroupState(obj).then((res) => {
        this.reasonVisible = false;
        this.$message.success("保存成功");
        this.getOrderList();
      });
    },

    closeCancelDialog() {
      this.cancelForm.reason = "";
    },
  },
};
</script>
  <style lang="scss" scoped>
.container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}

.el-table thead {
  color: #909399;
  font-weight: 500;
}

.more {
  display: flex;
  align-items: center;
}

.line {
  margin: 0 6px;
  background-color: rgb(194, 194, 194);
  width: 1px;
  height: 12px;
}

.spot {
  width: 6px;
  height: 6px;
  display: inline-block;
  border-radius: 100%;
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}

.tableBox {
  margin-top: 16px;
  border: 1px solid #e6e6e6;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  overflow: hidden;

  .tt {
    height: 38px;
    line-height: 38px;
    padding-left: 8px;
    background: #f7f8fa;
    border-radius: 8px 8px 0 0;
  }
}

.table_body {
  height: 85%;
}

.title h3:before {
  content: "" !important;
  padding-right: 9px !important;
  border-left: 3px solid #3f61f1;
}

.content_info {
  margin-left: 10px;
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: #fff;
  padding-right: 16px;
  padding-bottom: 16px;
}

.table_body_item {
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}

.table_body_item:hover {
  border-color: #3967ff;
}

.table_body_item > div {
  width: 100px;
}

.table_body_item > div:first-child {
  flex: 1;
}

.receipt_info {
  display: flex;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  min-width: 300px;
  min-height: 96px;
  .flag {
    padding-left: 3px;
    width: 20px;
    background: #3967ff;
    border-radius: 4px 0 0 4px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 23px;
  }

  .address {
    padding: 8px;
    p {
      margin-top: 12px;
      color: #999aaa;
    }
  }
}

.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  div {
    margin-bottom: 6px;
  }
}

.table_head {
  margin-bottom: 8px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  font-weight: 700;
  div {
    padding: 8px 16px;
    width: 200px;
  }
  > div:first-child {
    flex: 1;
  }
}

.left_tag {
  width: 120px;
  height: 100%;
  border-right: 1px solid rgb(238, 238, 238);
  background-color: #fff;
  p {
    padding: 11px 0;
    position: relative;
    padding-right: 10px;
    text-align: right;
    font-size: 14px;
    cursor: pointer;
  }
}

.active {
  color: #3f61f1;
  &::after {
    content: "";
    width: 3px;
    height: 16px;
    position: absolute;
    right: 0;
    top: calc(50% - 8px);
    background: #3f61f1;
  }
}
.table_head_address {
  margin-bottom: 8px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  font-weight: 700;
  div {
    padding: 8px 16px;
    width: 100px;
  }
  > div:first-child {
    flex: 1;
  }
}

.table_th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #f2f2f2;
  border: 1px solid #e6e6e6;
}

.table_tr {
  margin-bottom: 8px;
}

.key {
  padding-right: 16px;
  color: #999aaa;
}
.val {
  padding-right: 16px;
  padding-left: 4px;
  color: #333;
}

.product_info_box {
  border-bottom: 1px solid #e6e6e6;
}

.product_info_box:last-child {
  border-bottom: none;
}
.table_head_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #e6e6e6;
}

.product_info {
  min-width: 400px !important;
  flex: 1;
  display: flex;
  .product_img {
    margin-right: 8px;
    width: 110px;
    height: 110px;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      max-width: 100%;
      max-height: 100%;
    }
  }
  p {
    padding-bottom: 6px;
  }
  .product_detail {
    flex: 1;
  }
}

::v-deep .el-input-group__prepend div.el-select .el-input__inner {
  width: 126px !important;
  padding: 0 25px;
}

::v-deep .el-input__suffix {
  right: 12px;
}

.table_body_info {
  display: flex;
  background: #fff;
  > div {
    padding: 10px 16px;
    width: 200px;
    text-align: center;
    border-right: 1px solid #e6e6e6;
  }
  div:first-child {
    text-align: left;
  }
  div:last-child {
    border: none;
  }
}

.head_bar {
  height: 32px;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
}
</style>
